<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <meta charset="UTF-8">
    <script type="text/javascript" th:src="@{${session.baseUrl}+'js/common.js'}"></script>
    <script th:src="@{${session.baseUrl}+'js/jquery.js'}"></script>
    <link th:href="@{${session.baseUrl}+'style/reset.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/base.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/header.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/dialog.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/global.css'}" rel="stylesheet" type="text/css">
    <script th:src="@{${session.baseUrl}+'js/dialog.js'}"></script>
    <link rel="stylesheet" th:href="@{${session.baseUrl}+'style/register.css'}"/>
    <title>更改密码</title>
    <style>
        #sub {
            margin-left: 0.3rem;
            margin-right: 0.3rem;
            line-height: 0.75rem;
            width: 6.3rem;
            border-radius: 0.1rem;
            height: 0.75rem;
            font-size: 0.26rem;
            background: #2d9cff;
            color: #fff;
            margin-top: 0.1rem;
        }
        #sub1 {
            margin-left: 0.3rem;
            margin-right: 0.3rem;
            line-height: 0.75rem;
            width: 6.3rem;
            border-radius: 0.1rem;
            height: 0.75rem;
            font-size: 0.26rem;
            background: #2d9cff;
            color: #fff;
            margin-top: 0.1rem;
        }
        .get{
            position: absolute;
            width: 1.95rem;
            height: 0.6rem;
            background: #2d9cff;
            color: #fff;
            font-size: 0.26rem;
            text-align: center;
            line-height: 0.6rem;
            right: 0.4rem;
            border-radius: 0.1rem;
            margin-top: 0.14rem;
        }
    </style>
</head>
<body>
<header><span onclick="javascript:history.go(-1)"></span>更改密码</header>
<div style="margin-left: 75px;margin-top: 20px;">
   <!-- <input id="mailphoneradio" type="radio" name="mailnum" style="margin-left: -0.5rem;"/><span style="margin-top: -0.3rem;margin-left: 0rem;font-size: 15px;color: #2d9cff">手机接收验证码</span>-->
    <!--<input id="mailmailradio" type="radio" name="mailnum" style="margin-left: 30px;" checked/><span style="font-size: 15px;color: #2d9cff">邮箱接收验证码</span>-->
</div>
<div id="mailmaildiv"  style="display: none">
<form action="##" id="form1" method="post">
    <ul class="form">
        <input type="hidden" id="num">
        <input type="hidden" id="phone" th:value="${user.phone}">
        <li><input id="mail" type="text" th:value="${user.infoV}" disabled placeholder="请输入账户绑定的邮箱"
                   onblur="youxiang()"/></li>
        <span id="emailspan" style="margin-left: 0.4rem"></span>
        <li><input type="text" id="inputNum" onblur="yanMail()" placeholder="请输入邮箱收到的验证码"/><span
                id="confirm">获取验证码</span></li>
        <span id="mailspan" style="margin-left: 0.4rem"></span>
        <li><input id="password1" type="password" placeholder="请输入新密码" onblur="pass1()"/></li>
        <span id="passspan" style="margin-left: 0.4rem"></span>
        <li><input id="password" type="password" placeholder="请再次输入新密码" onblur="pass2()"/></li>
        <span id="msg" style="margin-left: 0.4rem"></span>
        <li><input id="sub" type="button" value="提&nbsp;&nbsp;&nbsp;&nbsp;交" onclick="update()"/></li>

    </ul>
</form>
</div>
<div id="mailphonediv">
    <form action="##" id="form11" method="post">
        <ul class="form">
            <input type="hidden" id="num1">
            <input type="hidden" id="phone1" th:value="${user.phone}">
            <li><input id="mail1" type="text" th:value="${user.phone}" disabled placeholder="请输入账户绑定的手机号"
                       onblur="youxiang()"/></li>
            <span id="emailspan1" style="margin-left: 0.4rem"></span>
            <li><input type="text" id="inputNum1" onblur="yanMail1()" placeholder="请输入手机收到的验证码"/><input type="button" class="get" value="获取验证码" id="confirm2" onclick="sendcode()"/></li>
            <span id="mailspan1" style="margin-left: 0.4rem"></span>
            <li><input id="password111" type="password" placeholder="请输入新密码" onblur="pass11()"/></li>
            <span id="passspan1" style="margin-left: 0.4rem"></span>
            <li><input id="password11" type="password" placeholder="请再次输入新密码" onblur="pass22()"/></li>
            <span id="msg1" style="margin-left: 0.4rem"></span>
            <li><input id="sub1" type="button" value="提&nbsp;&nbsp;&nbsp;&nbsp;交" onclick="update1()"/></li>

        </ul>
    </form>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
    var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;

    //改邮箱时更改验证方式
    $("#mailphoneradio").change(function () {
        document.getElementById("mailphonediv").style.display = "block";
        document.getElementById("mailmaildiv").style.display = "none";
    });
    $("#mailmailradio").change(function () {
        document.getElementById("mailphonediv").style.display = "none";
        document.getElementById("mailmaildiv").style.display = "block";
    });

    var flagmail;
    $("#confirm").one('click', function () {
        var mail = $("#mail").val();
        var namespan = $("#emailspan");

        if (mail == '') {
            namespan.html('请输入邮箱').css('color', '#ff2525');
            flagmail = 2;
        } else {
            $.ajax({
                    url: basePath + '/memberSendMail/send',
                    type: "get",
                    dataType: "JSON",
                    data: {
                        accept: mail,
                        type: '修改密码',
                        text: '您正在修改密码，您的验证码是：'
                    },
                    contentType: 'application/json;charset=UTF-8',
                    //async: false,
                    success: function (data) {

                        if (data != null) {
                            $("#num").val(data);
                            flagmail = 1;
                            namespan.html('发送成功').css('color', '#1dac22');
                        }

                    }
                }
            )

        }
    });
//发送短信
    var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount;//当前剩余秒数


    function sendcode() {
        curCount = count;
        var span = $("#span1");

        //设置button效果，开始计时
        $("#confirm2").attr("disabled", "true");
        $("#confirm2").css("color", '#f6f6f6');
        $("#confirm2").css("background", '#999999');
        $("#confirm2").val( + curCount + "秒再获取");
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
        $.ajax({
            url: basePath + '/memberSendSms/sms',
            type: "get",
            dataType: "JSON",
            data: {
                PhoneNumbers: $("#mail1").val(),
                TemplateCode: "SMS_171353611",
            },
            success: function (e) {
                if (e.msg == "OK") {
                    span.html('发送成功').css('color', '#33FF00');
                    $("#num1").val(e.data);
                } else {
                    span.html('发送失败').css('color', '#ff2525');

                }

            }
        })
    }

    var flagyouxiang;

    function youxiang() {
        var namespan = $("#emailspan");
        var mail = $("#mail").val();
        var myReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
        if (mail == '') {
            namespan.html('请输入邮箱').css('color', '#ff2525');
            flagyouxiang = 2;
        } else if (!myReg.test(mail)) {
            namespan.html('邮箱格式不对').css('color', '#ff2525');
            flagyouxiang = 2;
        } else {
            var phone1 = $("#phone").val();
            $.ajax({
                url: basePath + '/memberUser/Mail',
                type: "get",
                dataType: "JSON",
                data: {
                    phone: phone1,
                    infoV: mail,
                },
                contentType: 'application/json;charset=UTF-8',
                //async: false,
                success: function (data) {
                    if (data.msg == "ok") { //
                        flagyouxiang = 1;
                    } else if (data.msg == "nomail") {
                        namespan.html('请输入手机号绑定的邮箱').css('color', '#ff2525');
                        document.getElementById('mail').innerHTML = '';
                        flagyouxiang = 2;
                    }
                },
                error: function () {
                }
            });

        }

    }

//邮箱验证码验证
    var yanmail;

    function yanMail() {
        var namespan = $("#mailspan");
        var num = $("#num").val();
        var inputNum = $("#inputNum").val();
        if (num != inputNum) {
            namespan.html('验证码不正确').css('color', '#ff2525');
            yanmail = 2;
        } else if (inputNum == "") {
            namespan.html('验证码不能为空').css('color', '#ff2525');
            yanmail = 2;
        } else {
            namespan.html(' ');
            yanmail = 1;
        }

    }
    //手机验证码验证
    var yanmail1;

    function yanMail1() {
        var namespan1 = $("#mailspan1");
        var num1 = $("#num1").val();
        var inputNum1 = $("#inputNum1").val();
        if (num1 != inputNum1) {
            namespan1.html('验证码不正确').css('color', '#ff2525');
            yanmail1 = 2;
        } else if (inputNum1 == "") {
            namespan1.html('验证码不能为空').css('color', '#ff2525');
            yanmail1 = 2;
        } else {
            namespan1.html(' ');
            yanmail1 = 1;
        }

    }


    //密码验证
    function pass1() {
        var namespan = $("#passspan");
        var x = document.getElementById("password1").value.length;
        var name = $("#password1").val();
        if (name == '') {
            namespan.html('请输入密码').css('color', '#ff2525');
            return false;
        } else if (x <= 7) {
            namespan.html('密码必须大于8位').css('color', '#ff2525');
            return false;
        } else {
            namespan.html(' ');
            return true;
        }
    }
    //密码验证
    function pass11() {
        var namespan = $("#passspan1");
        var x = document.getElementById("password111").value.length;
        var name = $("#password111").val();
        if (name == '') {
            namespan.html('请输入密码').css('color', '#ff2525');
            return false;
        } else if (x <= 7) {
            namespan.html('密码必须大于8位').css('color', '#ff2525');
            return false;
        } else {
            namespan.html(' ');
            return true;
        }
    }


    var pass;

    //确认密码验证
    function pass2() {
        var namespan = $("#msg");
        var pass1 = $("#password1").val();
        var pass2 = $("#password").val();
        if (pass2 == '') {
            namespan.html('请输入密码').css('color', '#ff2525');
            pass = 2;
        } else if (pass1 == pass2) {
            namespan.html(' ');
            pass = 1;
        } else {
            namespan.html('两次输入密码不一致').css('color', '#ff2525');
            pass = 2;
        }
    }
    var pass;

    //确认密码验证
    function pass22() {
        var namespan = $("#msg1");
        var pass1 = $("#password111").val();
        var pass2 = $("#password11").val();
        if (pass2 == '') {
            namespan.html('请输入密码').css('color', '#ff2525');
            pass = 2;
        } else if (pass1 == pass2) {
            namespan.html(' ');
            pass = 1;
        } else {
            namespan.html('两次输入密码不一致').css('color', '#ff2525');
            pass = 2;
        }
    }


    function update() {
        var inputNum = $("#inputNum").val();
        var mail = $("#mail").val();
        var pass2 = $("#password").val();
        var msgspan = $("#msg");
        if (flagmail == 2) {
            msgspan.html('邮箱输入有误').css('color', '#ff2525');
        } else if (yanmail == 2) {
            msgspan.html('验证码输入有误').css('color', '#ff2525');
        } else if (pass == 2) {
            msgspan.html('密码输入有误').css('color', '#ff2525');
        } else if (mail == '') {
            msgspan.html('请输入邮箱').css('color', '#ff2525');
        } else if (inputNum == '') {
            msgspan.html('请输入验证码').css('color', '#ff2525');
        } else if (pass2 == '') {
            msgspan.html('请输入密码').css('color', '#ff2525');
        } else if (pass == 1 && flagmail == 1 && yanmail == 1) {
            msgspan.html(' ');
            $.ajax({
                url: basePath + '/wap/memberUser/updatePass',
                type: "get",
                dataType: "JSON",
                data: {
                    password: $("#password").val()
                },
                contentType: 'application/json;charset=UTF-8',
                //async: false,
                success: function (data) {
                    if (data.msg == "ok") { //
                        $('body').dailog({type: 'success', title: '更改密码', discription: '更改成功'});
                        self.setInterval(function () {
                            window.location.href = basePath + "/wap/mine.html";
                        }, 2000)
                    } else if (data.msg == "no") {
                        $('body').dailog({type: 'warning', title: '更改密码', discription: '更改失败'});
                        self.setInterval(function () {
                            window.location.href = basePath + "/wap/personal.html";
                        }, 2000)
                    }
                },
            })

        }
    }

    function update1() {
        var inputNum = $("#inputNum1").val();

        var pass2 = $("#password11").val();
        var msgspan = $("#msg1");
        if (yanmail1 == 2) {
            msgspan.html('验证码输入有误').css('color', '#ff2525');
        } else if (pass == 2) {
            msgspan.html('密码输入有误').css('color', '#ff2525');
        } else if (inputNum == '') {
            msgspan.html('请输入验证码').css('color', '#ff2525');
        } else if (pass2 == '') {
            msgspan.html('请输入密码').css('color', '#ff2525');
        } else if (pass == 1 && yanmail1 == 1) {
            msgspan.html(' ');
            $.ajax({
                url: basePath + '/wap/memberUser/updatePass',
                type: "get",
                dataType: "JSON",
                data: {
                    password: $("#password11").val()
                },
                contentType: 'application/json;charset=UTF-8',
                //async: false,
                success: function (data) {
                    if (data.msg == "ok") { //
                        $('body').dailog({type: 'success', title: '更改密码', discription: '更改成功'});
                        self.setInterval(function () {
                            window.location.href = basePath + "/wap/mine.html";
                        }, 2000)
                    } else if (data.msg == "no") {
                        $('body').dailog({type: 'warning', title: '更改密码', discription: '更改失败'});
                        self.setInterval(function () {
                            window.location.href = basePath + "/wap/personal.html";
                        }, 2000)
                    }
                },
            })

        }
    }


    //timer处理函数
    function SetRemainTime() {
        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#confirm2").removeAttr("disabled");//启用按钮
            $("#confirm2").css("color", '#fff');
            $("#confirm2").css("background", '#2d9cff');
            $("#confirm2").val("重新发送验证码");
            code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
        }
        else {
            curCount--;
            $("#confirm2").val( + curCount + "秒再获取");
        }
    }

</script>
</html>
